<template>
  <!-- 内容附件 -->
  <view>
    <view v-if="showTitle" class="fz-16 default-color font-bold">
      <text>供应内容附件</text>
    </view>
    <template v-for="(v, i) in getList" :key="i">
      <view class="file-item pa-8 disFlxAC br-8 mt-12">
        <TImage
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/file-icon-1.png"
          width="80rpx"
          height="80rpx"
        />
        <view class="flex-1 ov-2 fz-14 default-color font-bold mx-8">
          <text>{{ v.name }}</text>
        </view>
        <view class="fz-12 br-12 px-8 py-4 view-btn" @click="handleOpen(v)">
          <text>查看文件</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { useUpload, type DocumentFileType, type DocFileResult } from '@/hooks/core/useUpload';
  import { computed, type PropType } from 'vue';
  import { isJSON } from '@/utils/is';

  const props = defineProps({
    list: Array as PropType<string[]>,
    showTitle: {
      type: Boolean,
      default: true,
    },
  });

  const getList = computed(() => {
    return props.list?.map((v) => (isJSON(v) || {}) as DocFileResult);
  });

  const { openDocument } = useUpload();

  function handleOpen(item: DocFileResult) {
    openDocument({
      filePath: item.url,
      fileType: item.fileType as DocumentFileType,
      customFileName: item.name,
    });
  }
</script>

<style lang="scss" scoped>
  .file-item {
    background-color: #fff4e7;
    .view-btn {
      border: 1px solid #2878ff;
      color: #2878ff;
    }
  }
</style>
